<template>
  <div class="home" ref="scroll">
    <div class="scroll-wrapper">
      <div class="main-wrapper">
      <div class="carousel-wrapper">
        <slider>
          <div v-for="(item, index) in slides" :key="index"  @click="showNews">
            <img src="~@/assets/img/1-2-资讯.png" alt="">
          </div>
        </slider>
      </div>
    <div class="app-wrapper">
      <grid
        :cols="4"
        :show-lr-borders="false"
        :show-vertical-dividers	="false">
        <grid-item
          v-for="(app, index) in apps"
          :label="app.label"
          :key="index"
          :link="app.link">
          <img slot="icon" :src="app.icon"/>
        </grid-item>
      </grid>
    </div>
    <div class="divider">

    </div>
    <div class="tasks-wrapper">
      <group>
        <div slot="title" class="group-title-wrapper">
          <h4 class="group-title">最新任务</h4>
        </div>
        
        <cell
          v-waves
          is-link
          :link="{name: 'taskDetail'}"
          v-for="(task, index) in tasks"
          :key="index"
          :title="task.title">
          <div slot="icon" class="icon-wrapper">
            <icon name="document" :scale="2"></icon>
          </div>
          <div slot="inline-desc" class="desc">
            <div class="type">{{task.type}}</div>
            <div class="datetime">{{task.datetime}}</div>
          </div>
        </cell>
      </group>
    </div>
    
    </div>
    </div>
    <transition name="slide">
      <router-view class="child-view">
      </router-view>
    </transition>
    
  
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { Grid, GridItem, Group, Cell } from "vux";
import Slider from "@/components/Slider";
import { tasks } from "@/data/tasks";
import waves from '@/directives/waves'
import { setTimeout } from 'timers';

export default {
  directives: {
    waves
  },
  components: {
    Grid,
    GridItem,
    Group,
    Cell,
    Slider
  },
  data() {
    return {
      apps: [
        {
          label: "综合办公",
          icon: require("../../assets/img/ico-01-1.png"),
          link: {
            name: "work"
          }
        },
        {
          label: "任务管理",
          icon: require("../../assets/img/ico-02-1.png"),
          link: {
            name: "tasks"
          }
        },
        {
          label: "财务内控",
          icon: require("../../assets/img/ico-03-1.png"),
          link: {
            name: "finance"
          }
        },
        {
          label: "待办任务",
          icon: require("../../assets/img/ico-04-1.png"),
          link: {
            name: "todos"
          }
        },
        {
          label: "通知公告",
          icon: require("../../assets/img/ico-05-1.png"),
          link: {
            name: "announcements"
          }
        },
        {
          label: "位置采集",
          icon: require("../../assets/img/ico-06-1.png"),
          link: {
            name: 'location'
          }
        },
        {
          label: "工作纪实",
          icon: require("../../assets/img/ico-07-1.png"),
          link: {
            name: 'record'
          }
        },
        {
          label: "考勤",
          icon: require("../../assets/img/ico-08-1.png")
        },
        {
          label: "请假",
          icon: require("../../assets/img/ico-09-1.png"),
          link: {
            name: 'leave'
          }
        },
        {
          label: "会议考勤",
          icon: require("../../assets/img/ico-10-1.png")
        },
        {
          label: "点餐",
          icon: require("../../assets/img/ico-11-1.png"),
          link: {
            name: "meal"
          }
        }
      ],
      tasks,
      slides: [
        { linkUrl: "../../assets/img/1-2-资讯.png" },
        { linkUrl: "../../assets/img/1-2-资讯.png" },
        { linkUrl: "../../assets/img/1-2-资讯.png" },
        { linkUrl: "../../assets/img/1-2-资讯.png" }
      ]
    };
  },
  methods: {
    _initScroll(){
      this.scroll = new BScroll(this.$refs.scroll, {
        click: true
      })
    },
    showNews(){
      this.$router.push({
        name: 'news'
      })
    }
  },
  mounted(){
    setTimeout(()=>{
      this._initScroll()
      this.scroll.on('scrollEnd', () => {
        console.log('scrollEnd')
      })
    }, 20)
    
  }
};
</script>

<style lang="less" scoped>
@import "~@/styles/variables.less";

.home{
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}
.main-wrapper {
  .carousel-wrapper {
    position: relative;
    width: 100%;
    height: 3.62rem;
    overflow: hidden;
  }
  .divider {
    width: 100%;
    height: 10px;
    background-color: #e6e6e6;
  }
  .tasks-wrapper {
    .group-title-wrapper {
      position: relative;
      padding: 10px;
      .group-title {
        display: flex;
        align-items: center;
        height: 16px;
        line-height: 16px;
        font-size: @font-size-h4;
        &:before {
          content: " ";
          display: inline-block;
          width: 10px;
          height: 16px;
          margin-right: 12px;
          background-color: @color-theme-blue-medium;
        }
      }
    }
    .icon-wrapper {
      margin-right: 12px;
    }
    .desc {
      display: flex;
      font-size: @font-size-normal;
      .type {
        margin-right: 0.4rem;
      }
    }
  }
}
.child-view {
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
  }
</style>
